<template>
	<div class="goods-item">
		<img  :src="showImage" alt="" @load="imageLoad" @click="itemClick"/>
		<div class="goods-info">
			<p>{{goodsItem.title}}</p>
			<span class="price">{{goodsItem.price}}</span>
			<span class="collect">{{goodsItem.cfav}}</span>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			goodsItem:{
				type:Object,
				default(){
					return []
				}
			}
		},
		computed:{
			showImage(){
        return this.goodsItem.image || this.goodsItem.img || this.goodsItem.show.img
			}
		},
		methods:{
			imageLoad(){
				this.$bus.$emit('itemImageLoad')
			},//监听图片加载完成 事件总线
			itemClick(){
				this.$router.push('/detail/'+this.goodsItem.iid)
			}
		}
	}
</script>

<style>
	.goods-item {
		position: relative;
	    padding-bottom: 40px;
		  width: 45%;
	  }

	  .goods-item img {
	    width: 100%;
	    border-radius: 5px;
	  }

	  .goods-info {
	    font-size: 12px;
	    position: absolute;
	    bottom: 5px;
	    left: 0;
	    right: 0;
	    overflow: hidden;
	    text-align: center;
	  }

	  .goods-info p {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    margin-bottom: 3px;
	  }

	  .goods-info .price {
	    color: var(--color-high-text);
	    margin-right: 20px;
	  }

	  .goods-info .collect {
	    position: relative;
	  }

	  .goods-info .collect::before {
	    content: '';
	    position: absolute;
	    left: -15px;
	    top: -1px;
	    width: 14px;
	    height: 14px;
	  }
</style>
